// 展开/折叠父节点
<template>
  <el-button @click="graphEmbed" type="primary" style="margin: 10px">嵌套</el-button>
  <div id="container"></div>
</template>

<script lang="ts" setup>
import { ElMessage } from "element-plus";
import { Graph, DataUri, Shape, Node } from "@antv/x6";
import { onMounted, ref } from "vue";
import { Group } from "../../ts/AntvX6FirstEditionGroup5.ts";

let graph = null;

const graphEmbed = () => {
  ElMessage({
    message: "嵌套",
    type: "success",
  });
  const createGroup = (
    id: string,
    x: number,
    y: number,
    width: number,
    height: number,
    fill: string
  ) => {
    const group = new Group({
      id,
      x,
      y,
      width,
      height,
      attrs: {
        body: { fill },
        label: { text: id },
      },
    });
    graph.addNode(group);
    return group;
  };

  const createNode = (
    id: string,
    x: number,
    y: number,
    width: number,
    height: number,
    fill: string
  ) => {
    return graph.addNode({
      id,
      x,
      y,
      width,
      height,
      attrs: {
        body: {
          fill: fill || "blue",
          stroke: "none",
        },
        label: {
          text: id,
          fill: "#fff",
          fontSize: 12,
        },
      },
    });
  };

  const createEdge = (
    id: string,
    source: string,
    target: string,
    vertices?: { x: number; y: number }[]
  ) => {
    return graph.addEdge({
      id,
      source,
      target,
      vertices,
      label: id,
    });
  };

  const a = createGroup("a", 100, 40, 480, 280, "#91d5ff");
  const aa = createGroup("aa", 180, 100, 160, 140, "#47C769");
  const aaa = createGroup("aaa", 200, 160, 120, 40, "#3199FF");
  const c = createNode("c", 450, 200, 50, 50, "orange");

  a.addChild(aa);
  aa.addChild(aaa);
  a.addChild(c);

  createNode("d", 680, 80, 50, 50, "black");

  createEdge("edge1", "aa", "c");
  createEdge("edge3", "c", "d");
  aa.addChild(
    createEdge("edge2", "aa", "aaa", [
      { x: 60, y: 140 },
      { x: 60, y: 220 },
    ])
  );

  graph.on("node:collapse", ({ node }: { node: Group }) => {
    node.toggleCollapse();
    const collapsed = node.isCollapsed();
    const collapse = (parent: Group) => {
      const cells = parent.getChildren();
      if (cells) {
        cells.forEach((cell) => {
          if (collapsed) {
            cell.hide();
          } else {
            cell.show();
          }

          if (cell instanceof Group) {
            if (!cell.isCollapsed()) {
              collapse(cell);
            }
          }
        });
      }
    };

    collapse(node);
  });
};

const renderGraph = () => {
  graph = new Graph({
    container: document.getElementById("container"),
    width: 800,
    height: 600,
    panning: true,
    mousewheel: true,
    // 设置画布背景颜色
    background: {
      color: "#F2F7FA",
    },
  });

  //创建流程图数据
  const data = {
    //节点数据
    nodes: [],
  };

  graph.fromJSON(data); // 渲染元素
  graph.centerContent(); // 居中显示
};

onMounted(() => {
  renderGraph();
});
</script>
